<template>
  <div id="home" class="resource-home">
    <ul class="resource"  v-show="JC.length>0">
      <div class="title"><h2>基 础 教 程</h2></div>
      <li v-for="tab in JC">
        <div class="content" @click="resourceDetail(tab.id)">
          <h4> {{tab.title}} </h4>
          <span >{{tab.introduction}}</span>
        </div>
      </li>
    </ul>

    <ul class="resource"  v-show="GJ.length>0">
      <div class="title"><h2>高 级 教 程</h2></div>
      <li v-for="tab in GJ">
        <div class="content"  @click="resourceDetail(tab.id)">
          <h4> {{tab.title}} </h4>
          <span>{{tab.introduction}}</span>
        </div>
      </li>
    </ul>

    <ul class="resource" v-show="XM.length>0">
      <div class="title"><h2>经 典 项 目</h2></div>
      <li v-for="tab in XM">
        <div class="content"  @click="resourceDetail(tab.id)">
          <h4> {{tab.title}} </h4>
          <span>{{tab.introduction}}</span>
        </div>
      </li>
    </ul>
    <ul class="resource" v-show="QT.length>0">
      <div class="title"><h2>其 他</h2></div>
      <li v-for="tab in QT">
        <div class="content"  @click="resourceDetail(tab.id)">
          <h4> {{tab.title}} </h4>
          <span>{{tab.introduction}}</span>
        </div>
      </li>
    </ul>
    <div class="more" @click="showMore()">{{txt}}</div>
  </div>

</template>


<script>
  export default {
    data() {
      return {
        resources: [],
        total: 0,
        currentPage: 1,
        pageSize: 6,
        seen: false,
        isShow: true,
        txt: '显示更多',
        searchWord:'',
        XM:[],
        JC:[],
        GJ:[],
        QT:[]
      }
    },
    created () {
      this.initArticle();
    },

    methods: {
      showMore() {
        if (this.pageSize > 24) {
          this.txt = '请通过搜索查询更多信息'
        } else {
          this.pageSize = this.pageSize + 6;
          this.initArticle();
        }
      },

      enter: function () {
        this.seen = true;
      },
      leave: function () {
        this.seen = false;
      },

      resourceDetail(code) {
        this.$router.push(`/reward/${code}`)
      },

      initArticle() {
        this.searchWord = this.$route.params.word;
        this.$http.get('/api/resource/list', {
          params: {
            searchWord:this.searchWord,
            page: this.currentPage, limit: this.pageSize
          },
        }).then(resp => {
          this.XM = resp.data.data.XM;
          this.JC = resp.data.data.JC;
          this.GJ = resp.data.data.GJ;
          this.QT = resp.data.data.QT;
          this.search='';
        }).catch(err => {
          this.$Message.error('加载数据失败!');
        });
      },
      changePage(page) {
        this.currentPage = page;
        this.initArticle();
      }
    },
    watch: {}
  }
</script>
<style scoped>
  .resource-home {
    background: #fff;
    margin-top: 10px;
  }
  ul li {
    background: #fff;
    margin-top: 10px;
    border: 0px solid red;
    list-style: none;
  }
  .resource {
    overflow: hidden;
    margin-right: -3%;
  }

  .resource .title {
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    color: #34B3A0;
    margin-top: 10px;

  }
  .resource li {
    width: 30.333%;
    height: 150px;
    float: left;
    border: 1px solid #ccc;
    border-top: 8px solid #2DAAA6;
    border-radius: 6px;
    margin-right: 3%;
  }

  .content{
    margin: 15px 15px;
    cursor:pointer;
  }
  .content h4 {
    color: #5A5B5E;
    float: left;
    font-weight: bold;
    font-size: 15px;
    margin-bottom:15px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .content span {
    font-size: 10px;
    width: 100%;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  .more {
    width:40%;
    margin:0 auto;
    font-size: 20px;
    clear: both;
    color: #0080ff;
    border-radius: 10px;
    border: 1px solid #ccc;
    cursor: pointer;
  }

  @media screen and (max-width: 768px) {

    .resource {
      overflow: hidden;
      margin-right: 0%;
    }
    .resource li {
      width: 48%;
      height: 100px;
      margin: 1%;
    }
    .content{
      width: 140px;
      height: 50px;
      margin: 5px 5px;
    }
    .content h4 {
      color: #5A5B5E;
      font-weight: bold;
      float: left;
      font-size: 12px;
      margin-bottom:5px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }

    .content span {
      font-size: 7px;
      width: 140px;
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }


    img {
      width: auto;
      height: 140px;
    }
    .more {
      font-size: 15px;
    }
  }

</style>
